<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
    <script>
        const oBox = document.querySelector(".box")
        //节流函数的时间戳写法
        /* const fn = function () {
            console.log(1);
        }
        const thorrtle = function (fn, time) {
            let last = 0
            return function (e) {
                newtime = Date.now()
                if (newtime - last > 300) {
                    last = newtime
                    fn.call(this,e)
                }

            }

        } */

        //节流函数的定时器写法
        const fn = function(e){
            console.log(2);
        }
        const thorrtle = function(fn,wait){
            let time
            return function(e){
                if(time)return

                fn.call(this,e)
                
                time = setTimeout(() => {
                   
                    time= null
                }, wait);

            }
        }
        oBox.onmousemove = thorrtle(fn, 1000)

        
    </script>
</body>

</html>